---
title: Advanced Usage
metaTitle: Advanced Usage
description: Access Authenticator UI component state outside of the UI component
supportedFrameworks: react|angular|vue|react-native|svelte
---

import { useRouter } from 'next/router';
import { Tabs, Table, TableHead, TableRow, TableCell, TableBody, View } from '@aws-amplify/ui-react';
import { InlineFilter } from '@/components/InlineFilter';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import { ResponsiveTable, ResponsiveTableCell } from '@/components/ResponsiveTable';
import FederatedSignin from './to-federated-sign-in.mdx';
import UseAuthenticatorAngular from './useAuthenticator.angular.mdx';
import UseAuthenticatorReactNative from './useAuthenticator.react-native.mdx';
import UseAuthenticatorReact from './useAuthenticator.react.mdx';
import UseAuthenticatorVue from './useAuthenticator.vue.mdx';
import UseAuthenticatorSvelte from './useAuthenticator.svelte.mdx';
import CurrentRouteAngular from './current-route.angular.mdx';
import CurrentRouteReactNative from './current-route.react-native.mdx';
import CurrentRouteReact from './current-route.react.mdx';
import CurrentRouteVue from './current-route.vue.mdx';
import CurrentRouteSvelte from './current-route.svelte.mdx';
import CurrentUserAngular from './current-user.angular.mdx';
import CurrentUserReactNative from './current-user.react-native.mdx';
import CurrentUserReact from './current-user.react.mdx';
import CurrentUserVue from './current-user.vue.mdx';
import CurrentUserSvelte from './current-user.svelte.mdx';
import TriggerAngular from './trigger-transitions.angular.mdx';
import TriggerReactNative from './trigger-transitions.react-native.mdx';
import TriggerReact from './trigger-transitions.react.mdx';
import TriggerVue from './trigger-transitions.vue.mdx';
import TriggerSvelte from './trigger-transitions.svelte.mdx';
import ExampleAngular from './example.angular.mdx';
import ExampleReactNative from './example.react-native.mdx';
import ExampleReact from './example.react.mdx';
import ExampleVue from './example.vue.mdx';
import ExampleSvelte from './example.svelte.mdx';
import ApiAngular from './full-api.angular.mdx';
import ApiReactNative from './full-api.react-native.mdx';
import ApiReact from './full-api.react.mdx';
import ApiVue from './full-api.vue.mdx';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<InlineFilter filters={['angular']}>
  <UseAuthenticatorAngular />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <UseAuthenticatorReactNative />
</InlineFilter>
<InlineFilter filters={['react']}>
  <UseAuthenticatorReact />
</InlineFilter>
<InlineFilter filters={['vue']}>
  <UseAuthenticatorVue />
</InlineFilter>
<InlineFilter filters={['svelte']}>
  <UseAuthenticatorSvelte />
</InlineFilter>

## Access Auth State

<InlineFilter filters={['angular']}>
  <CurrentRouteAngular />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <CurrentRouteReactNative />
</InlineFilter>
<InlineFilter filters={['react']}>
  <CurrentRouteReact />
</InlineFilter>
<InlineFilter filters={['vue']}>
  <CurrentRouteVue />
</InlineFilter>
<InlineFilter filters={['svelte']}>
  <CurrentRouteSvelte />
</InlineFilter>

## Access Authenticated User

<InlineFilter filters={['angular']}>
  <CurrentUserAngular />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <CurrentUserReactNative />
</InlineFilter>
<InlineFilter filters={['react']}>
  <CurrentUserReact />
</InlineFilter>
<InlineFilter filters={['vue']}>
  <CurrentUserVue />
</InlineFilter>
<InlineFilter filters={['svelte']}>
  <CurrentUserSvelte />
</InlineFilter>

## Trigger Transitions

<InlineFilter filters={['angular']}>
  <TriggerAngular />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <TriggerReactNative />
</InlineFilter>
<InlineFilter filters={['react']}>
  <TriggerReact />
</InlineFilter>
<InlineFilter filters={['vue']}>
  <TriggerVue />
</InlineFilter>
<InlineFilter filters={['svelte']}>
  <TriggerSvelte />
</InlineFilter>

### Example

Here's an example that uses the `toForgotPassword` trigger transition, to create a custom button. Note that example uses the [Footer "slot" override](../authenticator/customization#headers--footers).

<InlineFilter filters={['angular']}>
  <ExampleAngular />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <ExampleReactNative />
</InlineFilter>
<InlineFilter filters={['react']}>
  <ExampleReact />
</InlineFilter>
<InlineFilter filters={['vue']}>
  <ExampleVue />
</InlineFilter>
<InlineFilter filters={['svelte']}>
  <ExampleSvelte />
</InlineFilter>

## Full API

<InlineFilter filters={['angular']}>
  <ApiAngular />
</InlineFilter>
<InlineFilter filters={['react-native']}>
  <ApiReactNative />
</InlineFilter>
<InlineFilter filters={['react']}>
  <ApiReact />
</InlineFilter>
<InlineFilter filters={['vue']}>
  <ApiVue />
</InlineFilter>

<Tabs.Container defaultValue="Access Contexts">
  <Tabs.List>
    <Tabs.Item value="Access Contexts">Access Contexts</Tabs.Item>
    <Tabs.Item value="Trigger Transition">Trigger Transition</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="Access Contexts">
    These are `readonly` contexts that represent the current auth state. Any unapplicable `context` will be `undefined`.

    <ResponsiveTable highlightOnHover>
      <TableHead>
        <TableRow>
          <TableCell as="th">Name</TableCell>
          <TableCell as="th">Description</TableCell>
          <TableCell as="th">Type</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <ResponsiveTableCell label="Name">`user`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Current signed in user</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`AuthUser`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`route`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Name of the auth flow user is in</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`string`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`error`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Any error returned from service API call</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`string`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`validationErrors`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Any form validation errors found. Maps each error message to respective input name.</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`Record<string, string>`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`hasValidationErrors`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Whether there are any form validation errors</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`boolean`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`isPending`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Whether service API call is in progress</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`boolean`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`codeDeliveryDetail`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Provides detail on where confirm sign up code is sent to.</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`CodeDeliveryDetail`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`allowedMfaTypes`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Multi-factor authentication types available for selection.</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`AuthMfaType[]`</ResponsiveTableCell>
        </TableRow>
      </TableBody>
    </ResponsiveTable>
    
  </Tabs.Panel>
  <Tabs.Panel value="Trigger Transition">

These helper functions trigger transition to another `route`. Note that any invalid transition (e.g. `sign-in` to `authenticated` directly) will be no-op.

    
    <ResponsiveTable highlightOnHover>
      <TableHead>
        <TableRow>
          <TableCell as="th">Name</TableCell>
          <TableCell as="th">Description</TableCell>
          <TableCell as="th">Type</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <ResponsiveTableCell label="Name">`toSignIn`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Transitions to `signIn`. Allowed from `signUp`, `confirmSignUp`, `confirmSignIn`, `setupTotp`, `forgotPassword`, and `confirmResetPassword`</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`() => void`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`toSignUp`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Transitions to `signUp`. Allowed from `signIn`.</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`() => void`</ResponsiveTableCell>
        </TableRow>
        <TableRow>
          <ResponsiveTableCell label="Name">`toForgotPassword`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Transitions to `forgotPassword`. Allowed from `signIn`.</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`() => void`</ResponsiveTableCell>
        </TableRow>
        <InlineFilter filters={['angular', 'vue']}>
          <FederatedSignin />
        </InlineFilter>
        <TableRow>
          <ResponsiveTableCell label="Name">`skipVerification`</ResponsiveTableCell>
          <ResponsiveTableCell label="Description">Skips verification process. Allowed from `verifyUser` and `confirmVerifyUser`</ResponsiveTableCell>
          <ResponsiveTableCell label="Type">`() => void`</ResponsiveTableCell>
        </TableRow>
      </TableBody>
    </ResponsiveTable>
    
  </Tabs.Panel>
</Tabs.Container>
